﻿//picShow
 (function(){
     $.fn.picShow = function(options){
         var _this = $(this);
         var defaults = {
             imgPath : 'images/',    //图片路径，默认为 images/
             width : 500,
             height : 250,
             number : 3,    //图片数量
             time : 3,    //图片移动时间间隔，单位为s
             mode : 'fadein'    //fadein:图片渐入渐出 or scroll：图片滚动
         }
         var opts = $.extend(defaults,options);
         
         //html代码
         var wrap = '<div id="picshow"><ul></ul><div class="num"></div></div>';
             
         //插入代码
         _this.append(wrap);
         alert("----");
         $("#picshow").css({
             width : opts.width + 'px',
             height : opts.height + 'px'
         });
         
         //插入图片
         for(var i=1; i <= opts.number; i++){
             var pic = '<li><a href="javascript:void()"><img src="' + opts.imgPath + i + '.jpg" alt="pic' + i + '" width="' + opts.width + '" height="' + opts.height + '" /></a></li>',
                 nav = '<a href="javascript:void()" order="' + i + '">' + i + '</a>';
             $("#picshow").find("ul").append(pic);
             $("#picshow").find("div.num").append(nav);
             if(i == 1){
                 $("#picshow ul li").addClass("cur");
                 $("#picshow div.num a").addClass("hover");
             }
         }
         
         function COMMON(){
             var movepic = setInterval(function(){
                 var nowpic = $("#picshow ul li.cur").index(),
                     nextpic = nowpic + 1;
                 if(nowpic == opts.number - 1){
                     nextpic = 0;
                 }
                 changePic(nowpic,nextpic);
             },opts.time*1000);
                 
             $("#picshow div.num a").click(function(){
                 clearInterval(movepic);
                 var nowpic = $("#picshow ul li.cur").index(),
                     nextpic = $(this).index();
                 changePic(nowpic,nextpic);    
             });
         }
         
         switch(opts.mode){
             case 'fadein':
                 function changePic(nowpic,nextpic){
                     $("#picshow div.num a").eq(nextpic).addClass("hover");
                     $("#picshow ul li").eq(nowpic).animate({'opacity':'0'},700,function(){
                         $("#picshow div.num a").eq(nowpic).removeClass("hover");    
                     }).removeClass("cur");    
                     $("#picshow ul li").eq(nextpic).animate({'opacity':'1'},700,function(){}).addClass("cur");
                 }
                 COMMON();
                 break;
             case 'scroll':
                 function changePic(nowpic,nextpic){
                     $("#picshow ul li").eq(nextpic).css({'left':opts.width + 'px','opacity':'1'});
                     $("#picshow ul li").eq(nowpic).animate({'left':-opts.width + 'px'},500,function(){
                         $(this).removeClass("cur");
                         $("#picshow div.num a").eq(nextpic).addClass("hover");    
                     });
                     $("#picshow ul li").eq(nowpic).css({'left':'0px'});
                     $("#picshow ul li").eq(nextpic).animate({'left':'0px'},500,function(){
                         $(this).addClass("cur");
                         $("#picshow div.num a").eq(nowpic).removeClass("hover");
                     });
                 }
                 COMMON();
                 break;
             default:
                 alert('"mode"参数错误!');
                 break;
         }
     }
 })(jQuery);